<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="Slide 轮播"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />
    <demo-block title="基础用法">
      <hips-slide
        ref="hipsSlide"
        @on-change="handleOnChange1"
      >
        <hips-slide-item
          v-for="(item, index) in list1"
          :key="index"
          @on-click="clickItem"
        >
          <img
            :src="item.picUrl"
            style="height: 150px;"
          >
        </hips-slide-item>
      </hips-slide>
      <hips-button @click="addPages">
        add 1 pages
      </hips-button>
      <hips-button @click="prevPages">
        prev
      </hips-button>
      <hips-button @click="nextPages">
        next
      </hips-button>
    </demo-block>

    <demo-block title="循环展示">
      <hips-slide loop>
        <hips-slide-item
          v-for="(item, index) in list2"
          :key="index"
        >
          <img
            :src="item.picUrl"
            style="height: 150px;"
          >
        </hips-slide-item>
      </hips-slide>
    </demo-block>

    <demo-block title="自动轮播">
      <hips-slide
        loop
        auto-play
      >
        <hips-slide-item
          v-for="(item, index) in list2"
          :key="index"
        >
          <img
            :src="item.picUrl"
            style="height: 150px;"
          >
        </hips-slide-item>
      </hips-slide>
      <hips-slide
        loop
        auto-play
        direction="y"
      >
        <hips-slide-item
          v-for="(item, index) in list2"
          :key="index"
        >
          <img
            :src="item.picUrl"
            style="height: 150px;"
          >
        </hips-slide-item>
      </hips-slide>
    </demo-block>

    <demo-block title="竖向滚动">
      <hips-slide direction="y">
        <hips-slide-item
          v-for="(item, index) in list2"
          :key="index"
        >
          <img
            :src="item.picUrl"
            style="height: 150px;"
          >
        </hips-slide-item>
      </hips-slide>
    </demo-block>

    <demo-block title="页码展示数字">
      <hips-slide
        pagination-type="number"
        pagination-position="right"
      >
        <hips-slide-item
          v-for="(item, index) in list2"
          :key="index"
        >
          <img
            :src="item.picUrl"
            style="height: 150px;"
          >
        </hips-slide-item>
      </hips-slide>
    </demo-block>

    <demo-block title="页码不包含在slide中">
      <hips-slide
        :pagination-include="false"
        pagination-type="number"
        pagination-position="right"
        pagination-bg-color="red"
      >
        <hips-slide-item
          v-for="(item, index) in list2"
          :key="index"
        >
          <img
            :src="item.picUrl"
            style="height:150px;"
          >
        </hips-slide-item>
      </hips-slide>
    </demo-block>

    <demo-block title="自定义数字型页码">
      <hips-slide
        pagination-type="number"
        pagination-position="right"
        @on-change="handleOnChange"
      >
        <span slot="pagination">
          {{ `当前${currentIndex + 1}/${list2.length}，左右滑动查看` }}
        </span>
        <hips-slide-item
          v-for="(item, index) in list2"
          :key="index"
        >
          <img
            :src="item.picUrl"
            style="height: 150px;"
          >
        </hips-slide-item>
      </hips-slide>
    </demo-block>

    <demo-block title="内容为遍历列表">
      <hips-slide
        :pagination-include="false"
        pagination-type="dots"
        pagination-bg-color="#fafafa"
        class="slide"
        pagination-active-color="#9B9B9B"
        pagination-inactive-color="#DBDBDB"
      >
        <hips-slide-item
          v-for="(slide, index) in dataList"
          :key="index"
          class="slide-item"
        >
          <div
            v-for="(item, idx) in slide"
            :key="idx"
            class="cell"
          >
            <div class="label">
              {{ item.label }}
            </div>
            <div class="value">
              {{ item.value }}
            </div>
          </div>
        </hips-slide-item>
      </hips-slide>
    </demo-block>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { Slide, SlideItem, Button } from '@hips/vue-ui';

export default {
  components: {
    [Slide.name]: Slide,
    [SlideItem.name]: SlideItem,
    [Button.name]: Button,
  },
  mixins: [ BasicView ],
  data() {
    return {
      list1: [
        {
          linkUrl: 'http://y.qq.com/w/album.html?albummid=0044K2vN1sT5mE',
          picUrl:
            'http://y.gtimg.cn/music/photo_new/T003R720x288M000001YCZlY3aBifi.jpg',
        },
        {
          linkUrl:
            'https://y.qq.com/m/digitalbum/gold/index.html?_video=true&id=2197820&g_f=shoujijiaodian',
          picUrl:
            'http://y.gtimg.cn/music/photo_new/T003R720x288M000004ckGfg3zaho0.jpg',
        },
      ],
      list2: [
        {
          linkUrl: 'http://y.qq.com/w/album.html?albummid=0044K2vN1sT5mE',
          picUrl:
            'http://y.gtimg.cn/music/photo_new/T003R720x288M000001YCZlY3aBifi.jpg',
        },
        {
          linkUrl:
            'https://y.qq.com/m/digitalbum/gold/index.html?_video=true&id=2197820&g_f=shoujijiaodian',
          picUrl:
            'http://y.gtimg.cn/music/photo_new/T003R720x288M000004ckGfg3zaho0.jpg',
        },
      ],
      dataList: [
        [
          {
            label: 'label1',
            value: 'value1',
          },
          {
            label: 'label2',
            value: 'value1',
          },
          {
            label: 'label3',
            value: 'value1',
          },
        ],
        [
          {
            label: 'label1',
            value: 'value2',
          },
          {
            label: 'label2',
            value: 'value2',
          },
          {
            label: 'label3',
            value: 'value2',
          },
        ],
        [
          {
            label: 'label3',
            value: 'value1',
          },
          {
            label: 'label3',
            value: 'value2',
          },
          {
            label: 'label3',
            value: 'value3',
          },
          {
            label: 'label3',
            value: 'value4',
          },
        ],
      ],
      currentIndex: 0,
    };
  },
  methods: {
    addPages() {
      this.list1 = this.list1.concat([
        {
          linkUrl: 'http://y.qq.com/w/album.html?albummid=001tftZs2RX1Qz',
          picUrl:
            'http://y.gtimg.cn/music/photo_new/T003R720x288M00000236sfA406cmk.jpg',
        },
      ]);
      this.$refs.hipsSlide.update();
    },
    prevPages() {
      this.$refs.hipsSlide.prev();
    },
    nextPages() {
      this.$refs.hipsSlide.next();
    },

    handleOnChange(index) {
      this.currentIndex = index;
      this.$hips.toast(`current index = ${index}`);
    },

    handleOnChange1(index) {
      this.$hips.toast(`current index = ${index}`);
    },

    clickItem(index) {
      this.$hips.toast(`current index = ${index}`);
    },
  },
};
</script>

<style lang="stylus">
.cell {
  line-height 24px
  padding 15px 0
  display flex
  align-items center
  background-color white
  border-bottom 1px solid #EEE
  margin 0 15px

  &:last-child {
    border-bottom none
  }

  .label, .value {
    font-size 14px
    color #4A4A4A
  }
  .label{
    font-family PingFangSC-Regular
    font-size: 14px
    color #6D7A80
    letter-spacing 0
    flex 1
    text-align left
  }

  .value{
    font-family PingFangSC-Medium
    font-size 14px
    color #4A4A4A
    letter-spacing 0
    flex 2
    text-align right
  }
}
</style>
